<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>layui.form小例子</title>
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all"></head>

  <body>
    <form class="layui-form">
      <div class="layui-tab">
        <ul class="layui-tab-title">
          <li class="layui-this">基础配置</li>
          <li>配置项修改</li></ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            <div class="layui-form-item">
              <label class="layui-form-label">node名称</label>
              <div class="layui-input-block">
                <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"></div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">模块选择</label>
              <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
                  <option value="0">写作</option>
                  <option value="1">阅读</option></select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">版本选择</label>
              <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
                  <option value="0">写作</option>
                  <option value="1">阅读</option></select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">常规配置</label>
              <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="最新版本">
                <input type="checkbox" name="like[read]" title="默认配置"></div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button></div>
            </div>
          </div>
          <div class="layui-tab-item">
            <div style="text-align:center">配置文件修改</div>
            <div class="layui-form-item">
              <table class="layui-table" id="deploymentform" lay-filter="deploymentform"></table>
            </div>
            <div class="layui-row">
              <div class="layui-col-md4">
                <div class="layui-form-item">
                  <label class="layui-form-label">文件名称</label>
                  <div class="layui-input-block">
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"></div>
                </div>
              </div>
              <div class="layui-col-md3">
                <div class="layui-form-item">
                  <label class="layui-form-label">节名称</label>
                  <div class="layui-input-block">
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"></div>
                </div>
              </div>
              <div class="layui-col-md5">
                <div class="layui-form-item">
                  <label class="layui-form-label">参数</label>
                  <div class="layui-input-block">
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"></div>
                </div>
              </div>
            </div>
            <div class="layui-col-md4 layui-col-md-offset8">
              <div class="layui-btn-group demoTable" id="layerDemo" style="margin-bottom: 0">
                <button data-method="addone" data-type="addone" class="layui-btn layui-btn-normal">添加</button></div>
            </div>
          </div>
        </div>
      </div>
    </form>
    <script src="//res.layui.com/layui/dist/layui.js"></script>
    <script>layui.use(['form', 'element', 'table'],
      function() {
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;

        //各种基于事件的操作，下面会有进一步介绍
      });</script>
  </body>

</html>